<template>
  <div :style="calcStyle">
    <template v-for="(cell, index) in gridView.Cells" :key="index">
      <BookCordCell :cell="cell"></BookCordCell>
    </template>
  </div>
</template>
<script>
import BookCordCell from './BookCordCell.vue';
import { computed } from 'vue';

export default {
  components: { BookCordCell },
  provide() {
    return {
      gridView: computed(() => this.gridView),
    };
  },
  inject: ['manager'],
  props: {

  },
  data() {
    return {

    };
  },
  computed: {
    gridView() {
      if (this.manager.bookCord) {
        return this.manager.bookCord;
      } else {
        return {
          Rows: [],
          Columns: [],
        };
      }
    },
    gridViewHeight() {
      let val = 0;
      this.gridView.Rows.forEach(a => {
        val += a.Height;
      });
      return val;
    },
    gridViewWidth() {
      let val = 0;
      this.gridView.Columns.forEach(a => {
        val += a.Width;
      });
      return val;
    },
    calcStyle() {
      const obj = {
        position: 'absolute',
        height: this.gridViewHeight + 'px',
        width: this.gridViewWidth + 'px',
        left: this.gridView.Left + 'px',
        top: this.gridView.Top + 'px',
        // border: '1px dotted #cddaea',
        'z-index': 1000,
      };
      return obj;
    },

  },

  mounted() {

  },
  methods: {
  },

};
</script>
<style>
</style>
